<template>
  <div class="empty-state">
    <div class="empty-state__icon">
      <i :class="icon"></i>
    </div>
    <h3 class="empty-state__title">{{ title }}</h3>
    <p class="empty-state__description">{{ description }}</p>
    <div v-if="$slots.action" class="empty-state__action">
      <slot name="action"></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, withDefaults } from 'vue';

export interface EmptyStateProps {
  /**
   * 空状态标题
   */
  title: string;
  
  /**
   * 空状态描述文本
   */
  description: string;
  
  /**
   * 图标类名 (基于 Font Awesome)
   * 示例: 'fas fa-inbox'
   */
  icon: string;
}

const props = withDefaults(defineProps<EmptyStateProps>(), {
  title: '暂无数据',
  description: '当前没有可显示的数据',
  icon: 'fas fa-inbox'
});
</script>

<style scoped lang="scss">
@import '@/assets/styles/variables.scss';

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: $spacing-xl;
  text-align: center;
  
  &__icon {
    font-size: 3rem;
    color: $gray-400;
    margin-bottom: $spacing-md;
    
    i {
      opacity: 0.7;
    }
  }
  
  &__title {
    font-size: $font-size-lg;
    font-weight: $font-weight-semibold;
    color: $text-primary;
    margin: 0 0 $spacing-sm;
  }
  
  &__description {
    font-size: $font-size-sm;
    color: $text-secondary;
    margin: 0 0 $spacing-lg;
    max-width: 400px;
  }
  
  &__action {
    margin-top: $spacing-md;
  }
}
</style> 